<template>
  <div class="activityIndex" style="padding-bottom:50px">
    <!-- <div class="swipeContainer" v-if="swipeImg.length > 0">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in swipeImg" :key="index">
          <img :src="item.img" class="swipeImg" />
        </van-swipe-item>
      </van-swipe>
    </div>-->

    <!-- <layout-content> -->
    <!-- <seckill-container @seckill-click="seckClick" :people-count="peopleCount" />

      <div class="bookBuyContainer">
        <van-button size="small" style="width:1rem">抢先预购</van-button>
      </div>

    <goods-item />-->

    <!-- </layout-content> -->
    <div class="regCon" @click="regClick"></div>
    <div class="indexImgContainer">
      <img class="indexImg" src="../../../assets/首页3.jpg" @load="bgLoad" @error="bgError" alt />
      <div class="sup1" @click="seckClick(1)"></div>
      <div class="sup2" @click="seckClick(2)"></div>
      <div class="sup3" @click="seckClick(3)"></div>

      <div class="supImg1" @click="seckClick(1)"></div>
      <div class="supImg2" @click="seckClick(2)"></div>
      <div class="supImg3" @click="seckClick(3)"></div>

      <div v-show="bgReady" class="countContainer">
        <div class="count">
          <div class="countTop">{{peopleCount.involvedCount}}</div>
          <div>已报名人数</div>
        </div>
        <div class="count">
          <div class="countTop">{{peopleCount.assistCount}}</div>
          <div>已分享次数</div>
        </div>
        <div class="count">
          <div class="countTop">{{peopleCount.browseCount}}</div>
          <div>已浏览人数</div>
        </div>
      </div>

      <div class="liveTab"></div>

      <div v-show="bgReady" class="goodsCount1">
        已抢
        <span class="numColor">{{peopleCount.goods1Purchase || 0}}</span>件，仅剩
        <span class="numColor">{{peopleCount.goods1Remain || 0}}件</span>
      </div>

      <div v-show="bgReady" class="goodsCount2">
        已抢
        <span class="numColor">{{peopleCount.goods2Purchase || 0}}</span>件，仅剩
        <span class="numColor">{{peopleCount.goods2Remain || 0}}件</span>
      </div>

      <div v-show="bgReady" class="goodsCount3">
        已抢
        <span class="numColor">{{peopleCount.goods3Purchase || 0}}</span>件，仅剩
        <span class="numColor">{{peopleCount.goods2Remain || 0}}件</span>
      </div>

      <div v-show="bgReady" class="slide1">
        <van-slider :value="slider1Rate" active-color="#051d2d">
          <template #button>
            <div style="display:none"></div>
          </template>
        </van-slider>
      </div>

      <div v-show="bgReady" class="slide2">
        <van-slider :value="slider2Rate" active-color="#051d2d">
          <template #button>
            <div style="display:none"></div>
          </template>
        </van-slider>
      </div>

      <div v-show="bgReady" class="slide3">
        <van-slider :value="slider3Rate" active-color="#051d2d">
          <template #button>
            <div style="display:none"></div>
          </template>
        </van-slider>
      </div>

      <div class="goods1" @click="goodsClick(1)"></div>
      <div class="goods2" @click="goodsClick(2)"></div>
      <div class="goods3" @click="goodsClick(3)"></div>
      <div class="goods4" @click="goodsClick(4)"></div>
      <div class="goods5" @click="goodsClick(5)"></div>
    </div>
  </div>
</template>

<script>
import SeckillContainer from "@/components/ActivityIndex/seckillContainer";
import GoodsItem from "@/components/ActivityIndex/goodsItem";
import LayoutContent from "./layoutContent";
import {
  Swipe,
  SwipeItem,
  Tab,
  Tabs,
  Button,
  Slider,
  Toast,
  Dialog
} from "vant";
export default {
  components: {
    SeckillContainer,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Slider.name]: Slider,
    GoodsItem,
    LayoutContent
  },
  computed: {
    peopleCount() {
      return this.$store.state.activity.supCount;
    },
    isReady() {
      return this.$store.state.activity.isReady;
    },
    slider1Rate() {
      let supCount = this.$store.state.activity.supCount;
      if (supCount.hasOwnProperty("goods1Purchase")) {
        return (
          (supCount.goods1Purchase /
            (supCount.goods1Purchase + supCount.goods1Remain)) *
          100
        );
      } else {
        return 0;
      }
    },
    slider2Rate() {
      let supCount = this.$store.state.activity.supCount;
      if (supCount.hasOwnProperty("goods2Purchase")) {
        return (
          (supCount.goods2Purchase /
            (supCount.goods2Purchase + supCount.goods2Remain)) *
          100
        );
      } else {
        return 0;
      }
    },
    slider3Rate() {
      let supCount = this.$store.state.activity.supCount;
      if (supCount.hasOwnProperty("goods3Purchase")) {
        return (
          (supCount.goods3Purchase /
            (supCount.goods3Purchase + supCount.goods3Remain)) *
          100
        );
      } else {
        return 0;
      }
    }
  },
  data() {
    return {
      bgReady: false
    };
  },
  created() {
    Toast.loading({ forbidClick: true });
  },
  methods: {
    seckClick(item) {
      if (
        this.$store.state.activity.supInfoMy.asProductid &&
        this.$store.state.activity.supInfoMy.asProductid != item
      ) {
        //当前人有发起过助力，且点击的不是助力的商品
        // this.$router.push({
        //   name: "mySup",
        //   query: {
        //     ...this.$route.query,
        //     gid: this.$store.state.activity.supInfoMy.asProductid
        //   }
        // });
        Dialog({ message: "你已发起过助力，请点击已发起助力的商品进行查看" });
      } else {
        this.$router.push({
          name: "startSup",
          query: {
            ...this.$route.query,
            gid: item
          }
        });
      }
    },
    bgLoad(e) {
      console.log(e);
      this.bgReady = true;
      Toast.clear();
    },
    bgError(e) {
      Toast.clear();
      Dialog({ message: "活动图片加载失败" });
    },
    regClick() {
      if (this.$store.state.activity.enrollInfo) {
        Dialog.alert({
          title: "温馨提示",
          message: "您已报名参加这场活动，请勿重复报名！"
        });
      } else {
        this.$router.push({
          name: "fillMsg",
          query: {
            type: "reg"
          }
        });
      }
    },
    goodsClick(e) {
      switch (e) {
        case 1: {
          //v9
          location.href =
            "https://shop41587557.m.youzan.com/wscgoods/detail/3f2x9ivkpkwod?banner_id=ag.41395389~goods.2~6~IdvlMyEg&reft=1594021508557&spm=ag.41395389";
          break;
        }
        case 2: {
          //e3c
          location.href =
            "https://shop41587557.m.youzan.com/wscgoods/detail/2xk906d6ddzvh?banner_id=ag.41395389~goods.2~2~Q0bO77rQ&reft=1594021624261&spm=ag.41395389";
          break;
        }
        case 3: {
          location.href =
            "https://shop41587557.m.youzan.com/wscgoods/detail/365f8gv70kzct?banner_id=ag.41395389~goods.2~4~d7mJAyrB&reft=1594021690997&spm=ag.41395389";
          break;
        }
        case 4: {
          location.href =
            "https://shop41587557.m.youzan.com/wscgoods/detail/2fmrkvbjo4v7x?banner_id=ag.41395389~goods.2~12~qkKONeAQ&reft=1594021755859&spm=ag.41395389";
          break;
        }
        case 5: {
          location.href =
            "https://shop41587557.m.youzan.com/wscgoods/detail/2fmrkvbjo4v7x?banner_id=ag.41395389~goods.2~12~qkKONeAQ&reft=1594021755859&spm=ag.41395389";

          break;
        }
      }
    }
  }
};
</script>

<style lang="scss">
@mixin sup {
  width: 175px;
  height: 48px;
  left: 520px;
  position: absolute;
}

@mixin supImg {
  position: absolute;
  width: 210px;
  left: 25px;
  height: 160px;
}

@mixin count {
  width: 226px;
  height: 82px;
  position: absolute;
  top: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: white;
  font-size: 0.08rem;
  // transform: scale(0.8);
}

@mixin goods {
  position: absolute;
  width: 667px;
  height: 380px;
  left: 28px;
}

@mixin goodsImg {
  position: absolute;
  width: 294px;
  height: 196px;
}

@mixin goodsCount {
  position: absolute;
  left: 270px;
  width: 220px;
  height: 20px;
  font-size: 0.1rem;
  color: #828282;
  .numColor {
    color: $font-color-primary;
  }
}

@mixin slider {
  position: absolute;
  left: 520px;
  width: 175px;
  height: 10px;
  .van-slider {
    height: 100%;
  }
}
.activityIndex {
  .regCon {
    position: fixed;
    // display: none;
    right: 8px;
    top: 200px;
    width: 155px;
    height: 163px;
    background-image: url("../../../assets/我要报名.png");
    background-size: 100% 100%;
    animation: regScale 1s linear infinite alternate;
    z-index: 2;
  }
  @keyframes regScale {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  .van-swipe-item {
    height: 100vw;
  }
  .swipeImg {
    width: 100vw;
    height: 100vw;
  }
  .swipeContainer {
    text-align: center;
  }

  .bookBuyContainer {
    text-align: center;
  }
  .indexImgContainer {
    position: relative;
    height: 4940px;
    .indexImg {
      width: 100vw;
      position: relative;
      z-index: -1;
    }
    .sup1 {
      @include sup;
      top: 1028px;
    }
    .sup2 {
      @include sup;
      top: 1298px;
    }
    .sup3 {
      @include sup;
      top: 1565px;
    }
    .supImg1 {
      @include supImg;
      top: 940px;
    }
    .supImg2 {
      @include supImg;
      top: 1210px;
    }
    .supImg3 {
      @include supImg;
      top: 1478px;
    }
    .countContainer {
      position: absolute;
      left: 0;
      top: 720px;
      height: 78px;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: white;
      text-align: center;
      font-size: 0.12rem;
      .count {
        flex: 1;
      }
      .countTop {
        margin-top: 0.04rem;
      }
    }

    .goodsCount1 {
      @include goodsCount;
      top: 1075px;
    }
    .goodsCount2 {
      @include goodsCount;
      top: 1344px;
    }
    .goodsCount3 {
      @include goodsCount;
      top: 1614px;
    }

    .liveTab {
      position: absolute;
      left: 0;
      top: 798px;
      height: 88px;
      width: 140px;
    }

    .slide1 {
      @include slider;
      top: 1091px;
    }
    .slide2 {
      @include slider;
      top: 1360px;
    }
    .slide3 {
      @include slider;
      top: 1629px;
    }

    .goods1 {
      @include goods;
      top: 1880px;
    }
    .goods2 {
      @include goods;
      top: 2320px;
    }
    .goods3 {
      @include goods;
      top: 2760px;
    }
    .goods4 {
      @include goods;
      top: 3190px;
    }
    .goods5 {
      @include goods;
      top: 3630px;
    }
  }
}
</style>